<template>
  <div class="mystar">
    <!-- 头部 -->
    <myheader title="我的收藏">
      <template #left>
        <van-icon name="arrow-left" />
      </template>
    </myheader>

    <van-swipe-cell v-for="(value, index) in starList" :key="value.id">
      <!-- 新闻数据 -->
      <articleBlock :post="value"> </articleBlock>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="deleteArticle(index)"
        />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
import myheader from "../../components/myheader";
import articleBlock from "../../components/articleBlock";
import { starList } from "../../apis/user";
export default {
  data() {
    return {
      starList: [], //收藏文章列表数组
    };
  },
  components: {
    myheader,
    articleBlock,
  },
  async mounted() {
    let res = await starList();
    console.log(res);
    this.starList = res.data.data;
    console.log(this.starList);
  },
  methods: {
    deleteArticle(index) {
      this.starList.splice(index, 1);
    },
  },
};
</script>

<style lang="less" scoped>
.delete-button {
  height: 100%;
}
</style>